<template>
	<view>
		<nav-header title="投诉举报" :show-right="false">
		</nav-header>
		<view v-if="!success">
			<view class="nickname">
				<!-- <text>投诉人：</text> -->
				<view class="head-img">
					<head-image class="img" :name="userInfo.nickName" :url="userInfo.headImageThumb"
						:size="100"></head-image>
				</view>
				<view class="sex">
					<text class="uname text-md-Medium">{{userInfo.nickName}}</text>
					<view class="fc" v-if="userInfo.sex==0">
						<svg-icon icon="sex" :width="32"></svg-icon><text class="text-sm-Regular">男</text>
					</view>
					<view class="fc" v-if="userInfo.sex==1">
						<svg-icon icon="woman" :width="32"></svg-icon><text class="text-sm-Regular">女</text>
					</view>
				</view>
			</view>
			<view class="beizhu">
				<uni-forms ref="form" :model="form" :rules="rules">
					<view class="title">
						<text class="text-sm-Medium">投诉内容</text>
						<text class="text-sm-Regular">{{contentNum}}/200</text>
					</view>
					<uni-forms-item name="content">
						<uni-easyinput type="textarea" autoHeight @input="countNum" v-model="form.content"
							placeholder="请输入投诉举报内容" :inputBorder="false" />
					</uni-forms-item>
					<!-- <button class="confirm-text btncolor" @click="submitForm">发送</button> -->
				</uni-forms>
			</view>

			<view class="commit">
				<view class="button-style">
					<button class="btncolor" @click="submitForm">
						<text class="text-md-Medium" style="color: #fff;">发送</text>
					</button>
				</view>
			</view>
		</view>


		<view class="sub-success" v-else>
			<view class="success">
				<!-- <img :src="getResource('/icon/correct.svg')" alt="" class="success-img"> -->
				<svg-icon icon="check-1" :width="192"></svg-icon>
				<text class="text-md-Regular">感谢您的理解，我们已经收到您提出的问题，将会尽快核实并回复您。您可以在<text
						style="color: #2970FF;">通讯录-平台通知</text>中接收平台给您的回复信息</text>
			</view>
		</view>
	</view>
</template>

<script>
import userStore from '../../store/userStore'

	export default {
		data() {
			return {
				userInfo: {},
				form: {
					content: "",
					reporterId:"",
					reportedUserId:"",
					
				},
				rules: {
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入问题内容',
						}]
					}
				},
				success: false,
				contentNum: 0
			}
		},
		methods: {
			submitForm() {
				if(this.form.content == ""){
					uni.showToast({
						title: "投诉内容不能为空！",
						icon: 'none'
					})
					return
				}
				this.$http({
					url: '/complaint/create',
					method: 'POST',
					data:this.form
				}).then(() => { 
					uni.showToast({
						title: "举报成功！",
						icon: 'none'
					})
					uni.navigateBack()
				})
				// this.$refs.form.validate().then(res => {
				// 	this.success = true
				// 	uni.showToast({
				// 		title:"发送成功"
				// 	})
				// 	setTimeout(() => {
				// 		uni.navigateBack()
				// 	}, 3000)
				// }).catch(err => {
				// 	console.log('表单错误信息：', err);
				// })
			},
			countNum(e) {
				this.contentNum = e.length
			},
			loadUserInfo(id) {
				this.$http({
					url: "/user/find/" + id,
					method: 'GET'
				}).then((user) => {
					this.userInfo = user;
					this.form.reporterId = this.userStore.userInfo.id
					this.form.reportedUserId = user.id
				})
			}
		},
		onLoad(options) {
			// 查询用户信息
			this.loadUserInfo(options.id);
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.nickname {
		margin: 16rpx 0;
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		gap: 25rpx;

		.head-img {
			width: 96rpx;
			height: 96rpx;
			padding: 8rpx;
		}

		.uname {
			font-size: 36rpx;
			font-weight: 600;
			color: $gray-900;
		}

		.sex {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			color: $gray-600;
			gap: 12px;
		}

		.fc {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}
	}


	.beizhu {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 40rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:first-child {
				color: $gray-900;
			}

			text:last-child {
				color: $gray-400;
			}
		}

		:deep(.uni-easyinput__content.is-textarea) {
			background-color: $gray-100 !important;
		}

		:deep(.uni-easyinput__content-textarea) {
			padding: 24rpx 32rpx;
			margin: 0 !important;
		}

		.btncolor {
			line-height: 75rpx;
			font-size: 30rpx;
			background-color: #048df5;
			color: #fff;
		}

		button {
			margin-top: 80rpx;
		}
	}

	.sub-success {
		width: 100%;
		position: absolute;
		top: 30%;

		.success {
			padding: 24rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			gap: 48rpx;

			.success-img {
				width: 200rpx;
				height: 200rpx;
			}

			text {
				color: $gray-600;
				text-align: center;
			}
		}
	}

	.commit {
		width: 100%;
		position: fixed;
		bottom: 42rpx;
		left: 0;
		border-top: 1rpx solid $gray-200;
		display: flex;
		justify-content: center;
		align-items: center;

		.button-style {
			padding: 24rpx 32rpx;
			width: 100%;
		}

		.btncolor {
			width: 100%;
			background-color: $brand-500;
			color: $white;
			border-radius: 34rpx;
			padding: 8rpx 24rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>